<template>
    <div>
        <!-- <div class="headerSty" style="margin: 20px 0 10px;">
            <div class="headerLeftSty">
                <div class="textSty">审批信息</div>
            </div>
        </div> -->
        <!-- <div>
            <div class="contSty">
                <div class="contLeftSty"></div>
                <div class="allBlo">
                    <div class="blockSty">
                        <i class="el-icon-check"></i>
                        已同意
                    </div>
                    <div class="text1">主管审批</div>
                    <div class="text2">张主管</div>
                    <div class="text2">2021-03-23 14:59:30</div>
                </div>
                <div style="display:flex;align-items: center;">
                    <i class="el-icon-arrow-right"></i>
                </div>

                <div class="contLeftSty"></div>
                <div class="allBlo">
                    <div class="blockSty">
                        <i class="el-icon-check"></i>
                        已同意
                    </div>
                    <div class="text1">财务审批</div>
                    <div class="text2">李财务</div>
                    <div class="text2">2021-03-23 14:59:30</div>
                </div>
                <div style="display:flex;align-items: center;">
                    <i class="el-icon-arrow-right"></i>
                </div>
                <div class="contLeftSty"></div>
                <div class="allBlo">
                    <div class="blockSty" style="background: red;">
                        <i class="el-icon-close"></i>
                        未通过
                    </div>
                    <div class="text1">人事审批</div>
                    <div class="text2">王人事</div>
                    <div class="text2">2021-03-23 14:59:30</div>
                </div>
                <div style="display:flex;align-items: center;">
                    <i class="el-icon-arrow-right"></i>
                </div>
                <div class="contLeftSty"></div>
                <div class="allBlo">
                    <div class="LastBlockSty">
                        <i class="el-icon-warning"></i>
                        代审批
                    </div>
                    <div class="text1">总经理审批</div>
                </div>
                <div class="lastTeSty">
                    <el-timeline :reverse="reverse" style="margin-top: 5px;">
                        <el-timeline-item v-for="(activity, index) in activities" :key="index">
                            {{ activity.timestamp }} {{ activity.content }}
                        </el-timeline-item>
                    </el-timeline>
                </div>
            </div>

        </div> -->
        <div class="headerSty1" style="margin: 20px 0 10px;">
            <div class="headerLeftSty">
                <div class="textSty">合同确认</div>
            </div>
            <div>
                <el-form label-width="120px">
                    <el-row>
                        <el-col :span="18">
                            <el-form-item label-width="40px">
                                <div class="headerLeftSty">
                                    <div class="navSty"></div>
                                    <div class="textSty1" style="margin-left: 10px;">项目负责人</div>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="一级消防注册工程师">
                                <el-select v-model="form.projectSaveDTO.engineer" placeholder="请选择" clearable
                                    :style='{ "width": "100%" }'>
                                    <el-option v-for="(item, index) in relOptions" :key="index" :label="item.nickName"
                                        :value="item.userId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="中级消防设施操作员">
                                <el-select v-model="form.projectSaveDTO.operators" placeholder="请选择" clearable
                                    :style='{ "width": "100%" }' multiple>
                                    <el-option v-for="(item, index) in relAOptions" :key="index" :label="item.nickName"
                                        :value="item.userId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="批准人">
                                <el-select v-model="form.approverId" placeholder="请选择" clearable
                                    :style='{ "width": "100%" }'>
                                    <el-option v-for="(item, index) in relOptions" :key="index" :label="item.nickName"
                                        :value="item.userId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="项目负责人">
                                <el-select v-model="form.projectSaveDTO.projectLeader" placeholder="请选择" clearable
                                    :style='{ "width": "100%" }'>
                                    <el-option v-for="(item, index) in relOptions" :key="index" :label="item.nickName"
                                        :value="item.userId"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="合同模板选择">
                                <el-radio-group @input="listAcc" v-model="radio">
                                    <el-radio label="1">平台</el-radio>
                                    <el-radio label="2">机构</el-radio>
                                </el-radio-group>
                                <el-select v-model="form.templateId" placeholder="请选择" clearable
                                    :style='{ "width": "50%" }'>
                                    <el-option v-for="(item, index) in relModelOptions" :key="index" :label="item.name"
                                        :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="合同名称" prop="content">
                                <el-input v-model="form.name" placeholder="请输入" clearable>
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="">
                                <el-button type="primary" @click="generateContract">生成合同</el-button>
                            </el-form-item>
                        </el-col>
                        <!-- 合同预览 -->
                        <el-col :span="24">
                            <el-form-item label-width="40px">
                                <div class="headerSty" style="width: 100%;">
                                    <div class="headerLeftSty">
                                        <div class="navSty"></div>
                                        <div class="textSty1" style="margin-left: 10px;color: rgb(90, 156, 248);">合同预览
                                        </div>
                                    </div>
                                    <el-button type="primary" v-if="btnState" @click="updateState">编辑合同</el-button>
                                    <el-button type="primary" v-else @click="recoverContract">复原</el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label-width="40px" v-if="btnState">
                                <div class="rickSty">
                                    <div v-html="textRich">
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item label-width="40px" v-else>
                                <EditorPlus :min-height="512" v-model="textRich" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label-width="40px">
                                <el-button type="error" v-if="btnState">点击签章并生成合同文件</el-button>
                                <el-button type="primary" v-else @click="updateContract">保存</el-button>
                            </el-form-item>

                        </el-col>

                        <!-- 合同生成 -->
                        <el-col :span="18">
                            <el-form-item label-width="40px">
                                <div class="headerLeftSty">
                                    <div class="navSty"></div>
                                    <div class="textSty1" style="margin-left: 10px;color: rgb(90, 156, 248);">已生成合同
                                    </div>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label-width="40px">
                                <div class="rickSty">
                                    <div v-html="textRichAcc">
                                    </div>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label-width="40px">
                                <el-button type="drag" @click="downloadContract">合同下载</el-button>
                                <el-button type="primary">提交</el-button>
                            </el-form-item>

                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <!-- <div class="headerSty" style="margin: 20px 0 10px;">
            <div class="headerLeftSty">
                <div class="navSty"></div>
                <div class="textSty">低值易耗材料清单</div>
            </div>
            <el-button type="primary">下载</el-button>
        </div>
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="index" label="序号" width="180">
                </el-table-column>
                <el-table-column prop="date" label="材料设备名称" width="180">
                </el-table-column>
                <el-table-column prop="name" label="规格型号" width="180">
                </el-table-column>
                <el-table-column prop="address" label="单价（元）">
                </el-table-column>
                <el-table-column prop="address" label="单位">
                </el-table-column>
                <el-table-column prop="address" label="备注">
                </el-table-column>
            </el-table>
        </div> -->
    </div>
</template>
<script>
import {
    getUserListType, getTemplateList, getTemplatePublicList, createContract,
    getContractPreview, putContract, dowRichText
} from "@/api/contract/contractOrg"
import { tansParams, blobValidate } from "@/utils/ruoyi";
import { saveAs } from 'file-saver'
export default {
    props: {
        dataForm: {
            type: Object,
            default: {},
        }
    },
    data() {
        return {
            form: {},
            // 表单校验
            rules: {},
            tableData: [],
            reverse: true,
            btnState: true,
            radio: '1',
            activities: [{
                content: '活动按期开始',
                timestamp: '2018-04-15'
            }, {
                content: '通过审核',
                timestamp: '2018-04-13'
            }, {
                content: '创建成功',
                timestamp: '2018-04-11'
            }],
            relOptions: [],
            relAOptions: [],
            relModelOptions: [],
            // 富文本
            textRich: '',
            textRichAcc: ''
        }
    },
    created() {
        this.getList()
        if (Object.keys(this.dataForm).length !== 0) {
            this.form = { ...this.form, ...this.dataForm, listName: this.dataForm.customerName }
            this.form.projectSaveDTO.operators = this.form.projectSaveDTO.operators.split(',').map(Number)
            if (this.dataForm.contractRichText) {
                this.textRichAcc = this.dataForm.contractRichText
            }
        }
    },
    methods: {
        getList() {
            // 一级消防注册工程师/负责人
            getUserListType('03').then(res => {
                this.relOptions = res.data
            })
            // 中级消防设施操作员
            getUserListType('04').then(res => {
                this.relAOptions = res.data
            })

            getTemplatePublicList().then(res => {
                this.relModelOptions = res.data
            })
        },
        listAcc(row) {
            if (row == 2) {
                getTemplateList('CONTRACT').then(res => {
                    this.relModelOptions = res.data
                })
            } else {
                getTemplatePublicList().then(res => {
                    this.relModelOptions = res.data
                })
            }
        },
        // 生成合同
        generateContract() {
            let data = Object.assign({}, this.form)
            if (data.projectSaveDTO.engineer) {
                if (Array.isArray(data.projectSaveDTO.engineer)) {
                    data.projectSaveDTO.engineer = data.projectSaveDTO.engineer.join(',')
                } else {
                    data.projectSaveDTO.engineer = data.projectSaveDTO.engineer
                }
            } else {
                data.projectSaveDTO.engineer = ''
            }
            if (data.projectSaveDTO.operators) {
                if (Array.isArray(data.projectSaveDTO.operators)) {
                    data.projectSaveDTO.operators = data.projectSaveDTO.operators.join(',')
                } else {
                    data.projectSaveDTO.operators = data.projectSaveDTO.operators
                }
            } else {
                data.projectSaveDTO.operators = ''
            }
            createContract(data).then(res => {
                getContractPreview(res.data.contractId).then(list => {
                    this.textRich = list.msg
                })
            })
        },
        // 下载合同
        downloadContract() {
            dowRichText({
                fileName: this.form.name,
                data: this.textRich
            }).then(async (data) => {
                const isBlob = blobValidate(data.data);
                const filename = decodeURIComponent(data.filename);
                if (isBlob) {
                    saveAs(data.data, filename)
                } else {
                    const resText = await data.text();
                    const rspObj = JSON.parse(resText);
                    const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
                    this.$modal.msgError(errMsg);
                }
            })
        },
        updateState() {
            this.btnState = !this.btnState
        },
        recoverContract() {
            getContractPreview(this.form.contractId).then(list => {
                this.textRich = list.msg
                this.btnState = !this.btnState
            })
        },
        updateContract() {
            putContract({
                contractRichText: this.textRich,
                id: this.form.contractId
            }).then(res => {
                this.textRich = this.form.contractRichText
                this.btnState = !this.btnState
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.headerSty {
    display: flex;
    justify-content: space-between;
    width: 97%;

    .headerLeftSty {
        display: flex;
        align-items: center;

        .textSty {
            margin-left: 8px;
            font-size: 16px;
            font-weight: 700;
        }


    }

}

.rickSty {
    border: 1px solid #999;
    height: 500px;
    overflow-y: auto;
}

.headerSty1 {
    width: 97%;

    .headerLeftSty {
        display: flex;
        align-items: center;

        .textSty1 {
            margin-left: 8px;
            font-size: 14px;
            font-weight: 700;
        }

        .textSty {
            margin-left: 8px;
            font-size: 16px;
            font-weight: 600;
        }
    }

}

.navSty {
    height: 15px;
    width: 5px;
    background: rgb(90, 156, 248);
}


.contSty {
    display: flex;

    .contLeftSty {
        height: 80px;
        width: 5px;
        background: rgb(90, 156, 248);
    }

    .allBlo {
        margin-left: 5px;
    }

    .LastBlockSty {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 132px;
        height: 30px;
        background: white;
        border-radius: 5px;
        color: rgb(90, 156, 248);
        border: 1px solid rgb(90, 156, 248);

        .el-icon-warning {
            color: rgb(90, 156, 248);
            font-weight: bolder;
            margin-right: 5px;
            font-size: 18px;
        }
    }

    .blockSty {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 132px;
        height: 30px;
        background: rgb(90, 156, 248);
        border-radius: 5px;
        color: white;

        .el-icon-check {
            color: white;
            font-weight: bolder;
            margin-right: 5px;
            font-size: 18px;
        }

        .el-icon-close {
            color: white;
            font-weight: bolder;
            margin-right: 5px;
            font-size: 18px;
        }
    }

    .lastTeSty {
        flex: 1;
        height: 120px;
        background: white;
        margin-left: 10px;
        border-radius: 5px;
        border: 1px solid rgb(90, 156, 248);
        overflow-y: auto;
    }
}

.text1 {
    font-size: 14px;
    font-weight: 500;
}

.text2 {
    font-size: 14px;
    color: #999;
}

.el-icon-arrow-right {
    color: rgb(90, 156, 248);
    font-weight: bolder;
    margin: 0 10px;
    font-size: 32px;
}
</style>